<template>
  <div class="mobile">
    <div
      style="
        width: 100%;
        height: 340px;
        background-image: linear-gradient(#d0e8ff, #f5f5f5);
        position: absolute;
        z-index: 0;
      "></div>
    <div style="display: flex; justify-content: space-between; padding: 8px; position: relative">
      <div><van-icon v-if="deptId === 213" name="exchange" @click="switchDirector"></van-icon></div>
      <div style="color: #999999; font-size: 10px" @click="logout">退出</div>
    </div>
    <!--
    <div class="m-bar">
      <el-row>
        <el-col v-if="deptId === 213" :span="2">
          <van-icon name="exchange"
            @click="switchDirector"
          />
        </el-col>
        <el-col v-else :span="2" style="color: #fff;">.</el-col>
        <el-col :span="20">{{ salon.sname }} - 管家</el-col>
        <el-col :span="2"><van-icon name="cross" @click="logout" /></el-col>
      </el-row>
    </div>
    <div class="m-summary">
      <van-rate
        v-model="keeper.star"
        :size="20"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
        :readonly="true"
      />
      <p style="margin-top: 5px">{{ name }}</p>
      <p style="color: gray; margin-top: 5px">本月积分：{{ score.score }}</p>
    </div>
    <div
      style="
        color: #ff976a;
        line-height: 10px;
        margin-top: -10px;
        text-align: center;
      "
    >
      {{ score.details }}
    </div>
    <div
      style="
        display: flex;
        background-color: #fff;
        justify-content: space-between;
        padding: 5px;
        line-height: 20px;
        color: #1989fa;
        text-align: center;
      "
    >
      <span>本月计划：{{ keeper.moneyPlan }}￥</span>
      <span>本月实际：{{ keeper.money }}￥</span>
      <span>完成率：{{ rate }}%</span>
    </div> -->
    <router-view :salon="salon" style="position: relative"></router-view>
    <div style="height: 50px"></div>
    <van-tabbar route>
      <van-tabbar-item to="/mobile/keeper/consumer" icon="friends-o">顾客</van-tabbar-item>
      <van-tabbar-item to="/mobile/keeper/plan" icon="notes-o">计划</van-tabbar-item>
      <van-tabbar-item to="/mobile/keeper/money" icon="user-o">管家</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Tabbar from 'vant/lib/tabbar';
import TabbarItem from 'vant/lib/tabbar-item';
import 'vant/lib/tabbar/style';
import 'vant/lib/tabbar-item/style';
import { getSalon } from '@/api/txs';
import { getScoreByUidAndSdate } from '@/api/ym';
import { getAdminById, getTokenDirector } from '@/api/admin';
import Rate from 'vant/lib/rate';
import 'vant/lib/rate/style';
import { setToken } from '@/utils/auth';
import Notify from 'vant/lib/notify';
import 'vant/lib/notify/style';

export default {
  components: {
    [Notify.name]: Notify,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Rate.name]: Rate,
  },
  data() {
    return {
      rate: 0,
      salon: {
        sname: '',
      },
      score: {
        score: 0,
        details: '',
      },
      keeper: {
        star: 0,
        money: 0,
        moneyPlan: 0,
      },
    };
  },
  computed: {
    ...mapGetters(['openId', 'name', 'id', 'deptId']),
  },
  created() {
    if (this.deptId === 202) {
      this.$router.push('/mobile/director');
    }
    this.fetchData();
    const date = new Date();
    const sdate = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2);
    getScoreByUidAndSdate(this.id, sdate).then(res => {
      if (res.data.data) {
        this.score = res.data.data;
      }
    });
    getAdminById(this.id).then(res => {
      this.keeper = res.data.data;
      this.rate = ((this.keeper.money * 100) / this.keeper.moneyPlan) | 0;
    });
  },
  methods: {
    logout: async function () {
      await this.$store.dispatch('user/logout').then(res => {
        this.$router.push(`/login`);
      });
    },
    fetchData() {
      getSalon(this.openId).then(res => {
        this.salon = res.data.data;
        // console.log(this.openId);
        // console.log(res.data);
        if (this.salon.status === 2) {
          // 停滞期直接logout
          Notify({ type: 'danger', message: '当前门店为停滞期，无法登录' });
          this.logout();
        } else if (this.salon.status === 1) {
          // 试用期判断当前时间
          if (new Date() > new Date(this.salon.deadline)) {
            Notify({ type: 'danger', message: '门店试用期已过，无法登录' });
            this.logout();
          }
        }
      });
    },
    switchDirector() {
      // 更新token
      getTokenDirector(this.openId).then(res => {
        const token = res.data.token ? res.data.token : '';
        if (token === '') {
          Notify({ type: 'warning', message: '没有院长，请联系管理员' });
        } else {
          setToken(token);
          // 跳转到院长
          // this.$router.push('/mobile/director')
          window.location.reload();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mobile {
  position: relative;
  background: #f5f5f5;
  font-size: 26px;
  .m-bar {
    background-color: #fff;
    color: #c31171;
    font-size: 30px;
    line-height: 80px;
    text-align: center;
    box-shadow: 0px 0px 10px rgb(201, 201, 201);
    margin-bottom: 10px;
  }
  .m-summary {
    display: flex;
    font-size: 30px;
    // line-height: 80px;
    // margin-bottom: 20px;
    justify-content: space-between;
    width: 100%;
    padding: 0 50px 0 50px;
  }
}
</style>
